<template>
  <view class="pageLayout">
    <CategoryLinkage
      v-if="categoryData.length"
      :category-data="categoryData"
      left-field-name="frameworkName"
      right-field-name="frameworkName"
      right-child-name="realName"
      right-child-list-name="listPeopleModel"
      :sticky-top="0"
    >
      <template v-slot:rightitem="{ rightItem }">
        <view class="right_box">
          <view
            v-for="(child, childIndex) in rightItem"
            :key="childIndex"
            class="right_box_item"
            @click="clickItem(child)"
          >
            <view class="left">
              <view class="avatar">
                <image
                  :src="
                    child.avatarUrl
                      ? child.avatarUrl
                      : '../../static/images/icon-logo.jpg'
                  "
                  mode="aspectFill"
                  
                ></image>
              </view>
              <view class="userInfo">
                <view class="name">{{ child.realName }}</view>
                <view class="role">{{
                  child.position ? child.position : "暂无"
                }}</view>
              </view>
            </view>
            <view class="right">
              <view>
                <view class="number">{{ child.processCount }}</view>
                <view class="text">推进项目</view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </CategoryLinkage>
    <view v-if="categoryData.length == 0">
      <u-empty mode="list"> </u-empty>
    </view>
  </view>
</template>

<script>
import store from "../../store/index";
import CategoryLinkage from "@/components/CategoryLinkage.vue";
import { queryApproveFramework } from "../api/approval/index";
export default {
  components: {
    CategoryLinkage,
  },
  data() {
    return {
      categoryData: [],
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    clickItem(item) {
      console.log(item, "item");
      // return;
      uni.navigateTo({
        url: `/pagesA/approval/organizationList?id=${item.userID}&name=${item.realName}`,
      });
    },
    /**
     * 获取组织架构
     */
    getCateList() {
      queryApproveFramework().then((res) => {
        console.log(res, "queryApproveFramework");
        let arr = res.data.map((item) => {
          return {
            ...item,
            listPeopleModel: item.listPeopleModel.map((child) => {
              return {
                ...child,
                avatarUrl: child.avatarUrl
                  ? this.buildImgurl + child.avatarUrl
                  : "",
              };
            }),
          };
        });
        this.categoryData = arr;
      });
    },
  },
  onShow() {
    this.getCateList();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>

<style lang="scss" scoped>
.pageLayout {
  padding: 0;
  height: 100vh;
}
.right_box {
  display: flex;
  flex-direction: column;
  .right_box_item {
    padding: 26rpx 32rpx;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .avatar {
        width: 76rpx;
        height: 76rpx;
        border-radius: 8rpx;
        overflow: hidden;
        margin-right: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .userInfo {
        margin-left: 20rpx;
        .name {
          font-size: 30rpx;
          font-weight: 600;
          color: #000;
        }
        .role {
          margin-top: 4rpx;
          font-size: 24rpx;
          color: #c8c9cc;
        }
      }
    }
    .right {
      .number {
        color: #000000;
        font-size: 30rpx;
        font-weight: bold;
        font-family: DIN;
        text-align: center;
        margin-bottom: 4rpx;
      }
      .text {
        font-size: 24rpx;
        color: #c8c9cc;
      }
    }
  }
}
.bottom {
  padding-bottom: 300rpx;
  color: #c8c9cc;
  font-size: 24rpx;
  text-align: center;
}
</style>
